<template>
  <div v-if="page.length">
    <div class="relative">
      <img
        :src="isMobile ? page[0].img_m : page[0].img"
        class="width-100"
        alt=""
      >
      <div
        class="absolute"
        :style="isMobile ? {
          top: '40px',
          left: '20px'
        } : {
          top: '80px',
          left: `${80/3.75}vw`
        }"
      >
        <div
          class="dib bd bb bd-000"
          :class="isMobile ? 'f20 pb10 mb10' : 'f40 b pb20 mb20'"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="flip-left"
          data-aos-easing="ease-out-cubic"
          data-aos-duration="1000"
        >
          {{ page[0].t1 }}
        </div>
        <div
          :class="isMobile ? 'f16' : 'f24 c-666'"
          style="font-weight:lighter"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="flip-left"
          data-aos-easing="ease-out-cubic"
          data-aos-duration="1000"
        >
          {{ page[0].t2 }}
        </div>
      </div>
    </div>

    <div class="relative">
      <img
        v-if="!isMobile"
        :src="page[1].img"
        class="width-100"
        alt=""
        v-vue-aos.once="{animationClass:'fadeInUp animated'}"
        data-aos="fade-left"
        data-aos-duration="1000"
      >
      <div
        :class="isMobile ? 'ptb40 plr20' : 'absolute'"
        :style="{
          top: '70px',
          left: `${30/3.75}vw`
        }"
      >
        <div
          class="bd bb bd-000 pb30 mb30"
          :class="isMobile ? 'f24' : 'f40 dib'"
          v-html="isMobile ? page[1].t1.split(' ').join('<br>') : page[1].t1"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
          data-aos-easing="ease-out-cubic"
        />
        <div
          v-for="(item,i) in page[1].t2"
          :key="i"
          class=""
          :class="isMobile ? 'f16 mb10' : 'f20 mb20'"
          :style="i === page[1].t2.length - 1 ? '' : 'font-weight:lighter'"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
          data-aos-easing="ease-out-cubic"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <div
      class="relative"
      :class="isMobile && 'pb40'"
      style="background:#F6F6F6"
    >
      <div
        :class="isMobile ? 'tc pt40' : 'absolute'"
        :style="{
          top: '170px',
          left: `${30/3.75}vw`
        }"
      >
        <div
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
          :class="isMobile ? 'f20 mb10' : 'f40 mb30'"
        >
          {{ page[2].t1 }}
        </div>
        <div
          class="mb20"
          :class="isMobile ? 'f14' : 'f20'"
          :style="'font-weight:lighter'"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
        >
          {{ page[2].t2 }}
        </div>
        <div
          class="f14 c-999"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
        >
          {{ page[2].t3 }}
        </div>
      </div>
      <img
        :src="isMobile ? page[2].img_m : page[2].img"
        :class="isMobile ? 'm-auto db' : 'width-100'"
        :style="isMobile ? 'width:80%' : ''"
        alt=""
        v-vue-aos.once="{animationClass:'fadeInUp animated'}"
        data-aos="fade-left"
        data-aos-duration="1000"
      >
    </div>

    <div
      class="relative tc"
      style="background:#FAFDFF"
    >
      <div :style="isMobile && 'background:#E3F3FE;padding: 30px 0 100px 0;'">
        <div
          :style="isMobile ? 'font-size:24px;' : 'font-size:40px;padding: 80px 0 10px 0;'"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
        >
          {{ page[3].t1 }}
        </div>
        <div
          class="dib"
          style="width: 50px;height: 3px;background: green;"
        />
        <div
          :class="isMobile ? 'f18 mt20' : 'f32 mt20'"
          style="font-weight:lighter"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="fade-up"
        >
          {{ page[3].t2 }}
        </div>
      </div>
      <div
        :class="isMobile ? '' : 'flex-center mt50 pb50'"
        :style="isMobile && 'margin-top:-70px;'"
      >
        <div
          v-for="(item, i) in page[3].t3"
          :key="i"
          :style="isMobile ? 'height:115px' : 'width:210px;height:270px'"
          class="br5 mlr15"
          :class="isMobile ? 'flex-center plr15 mb15 bg-fff tl' : 'pt15'"
          v-vue-aos.once="{animationClass:'fadeInUp animated'}"
          data-aos="zoom-in"
          data-aos-duration="1000"
        >
          <img
            :style="{ width: isMobile ? '60px' : '90px' }"
            :src="[site.icon.i1,site.icon.i2,site.icon.i3,site.icon.i4,site.icon.i5,site.icon.i6][i]"
            alt=""
          >
          <div :class="isMobile && 'ml15'">
            <div
              class="f18"
              :class="{
                mt20: !isMobile
              }"
              :style="{
                color: isMobile && '#479892'
              }"
              v-vue-aos.once="{animationClass:'fadeInUp animated'}"
              data-aos="zoom-in"
              data-aos-duration="1000"
            >
              {{ item.t }}
            </div>
            <div
              style="text-align: left;font-weight: lighter"
              class="f16"
              v-vue-aos.once="{animationClass:'fadeInUp animated'}"
              data-aos="zoom-in"
              data-aos-duration="1000"
            >
              {{ item.d }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="relative">
      <img
        :src="isMobile ? page[4].img_m : page[4].img"
        class="width-100"
        alt=""
      >
      <div
        class="width-100 height-100 tc"
        :class="isMobile ? '' : 'absolute t0 l0'"
      >
        <div :style="isMobile && 'padding: 30px 0;margin-top:-120px;'">
          <div
            :style="isMobile ? 'font-size:24px;' : 'font-size:40px;padding: 80px 0 10px 0;'"
            v-vue-aos.once="{animationClass:'fadeInUp animated'}"
            data-aos="fade-up"
            data-aos-delay="500"
          >
            {{ page[4].t1 }}
          </div>
          <div
            class="dib"
            style="width: 50px;height: 3px;background: green;"
          />
        </div>
        <div
          :class="isMobile ? 'pb50' : 'flex-center'"
          style=""
          :style="isMobile ? '' : 'margin-top:130px'"
        >
          <div
            v-for="(item, i) in page[4].t2"
            :key="i"
            style="width:250px;height:250px"
            :style="{
              color: ['#5FA4F8', '#5E72F6', '#F09964'][i],
              marginTop: isMobile && ['', '-100px', '-250px'][i],
              marginLeft: isMobile && ['', '-30px', ''][i],
              marginRight: isMobile && ['', '', '-30px'][i],
            }"
            class="relative pr15"
            :class="isMobile ? 'm-auto' : 'mlr20'"
            v-vue-aos.once="{animationClass:'fadeInUp animated'}"
            data-aos="flip-right"
            data-aos-delay="500"
            data-aos-duration="2000"
          >
            <img
              :src="page[4].img2"
              alt=""
              class="width-100"
            >
            <div class="absolute t0 l0 width-100 b0 flex-center flex-column">
              <div
                class="f32"
                v-vue-aos.once="{animationClass:'fadeInUp animated'}"
                data-aos="zoom-in"
                data-aos-duration="1000"
              >
                {{ item.t }}
              </div>
              <div
                class="f20"
                style="font-weight:lighter"
                v-vue-aos.once="{animationClass:'fadeInUp animated'}"
                data-aos="zoom-in"
                data-aos-duration="1000"
              >
                {{ item.d }}
              </div>
              <div
                class="f20"
                style="font-weight:lighter"
                v-vue-aos.once="{animationClass:'fadeInUp animated'}"
                data-aos="zoom-in"
                data-aos-duration="1000"
              >
                {{ item.d2 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: []
    }
  },

  async created () {
    const { data } = await this.fetch('/page3.json')
    this.page = data
  },

  methods: {
  }
}
</script>
